<template>
  <div class="raise-market">
    <!-- 加载中动画 -->
    <transition
      leave-active-class="animate__animated animate__fadeOutUp animate__faster">
      <loading v-if="isLoading"></loading>
    </transition>

    <transition enter-active-class="animate__animated animate__fadeInUpBig" >
      <div v-if="!isLoading">
        <div v-for="item in goodsList" :key="item.id">
          <goods :goodsObj="item" :type="item.type"></goods>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import goods from "../components/goods.vue";
import loading from "../components/loading.vue";
export default {
  name: "RaiseMarket",
  components: {
    goods,
    loading,
  },
  data() {
    return {
      goodsList: [],
      isLoading: true,
      loadingTime: 500,
    };
  },
  mounted() {
    let _loading = localStorage.getItem("_loading");
      // 判断是否发起请求
    if(_loading){
        this.isLoading = _loading;//表示正在请求
    }
    axios.get("/data/raise_market_.json")
      .then((res) => {
        this.goodsList = [...res.data.resData.list];
        // 延迟300毫秒 隐藏正在加载
        let d = setTimeout(()=>{
            this.isLoading = false;// 隐藏正在加载
            localStorage.setItem("_loading",false);
            clearTimeout(d);
        },this.loadingTime);
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</script>

<style lang="scss" scoped>
</style>